<template>
  <div class="home-container">
    <!-- 全屏容器 -->
    <dv-full-screen-container>
      <!-- 第二行 -->
      <div class="module-box">
        <!-- 左 -->
        <div style="flex:0 1 25%">
          <dv-border-box-1 style="width: 100%;height: 200px;">
            <div style="width:100%;height:200px;margin: auto;" flex="~ col" gap8 justify-center items-center bg-dark>
              <div flex gap8>
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
                <dv-button @click="console.log('click')" border="Border2" color="#4c8045">智慧政务</dv-button>
                <dv-button @click="console.log('click')" border="Border3" color="#c8161d"
                  font-color="#e18a3b">智慧水利</dv-button>
              </div>
              <div flex gap8>
                <dv-button @click="console.log('click')" border="Border4" color="#a6559d">智慧交通</dv-button>
                <dv-button @click="console.log('click')" border="Border5" color="#e18a3b">智慧医疗</dv-button>
                <dv-button @click="console.log('click')" border="Border6" color="#615ea8">智慧农业</dv-button>
              </div>
            </div>
          </dv-border-box-1>

          <dv-border-box-2 style="width: 100%;height: 200px;">
            <dv-capsule-chart :config="config2" style="width:100%;height:100%;margin: auto;" />
          </dv-border-box-2>
          <dv-border-box-10 style="width: 100%;height: 200px;">
            <dv-water-level-pond :config="config3" style="width:100%;height:200px;margin: auto;" />
          </dv-border-box-10>
        </div>
        <!-- 中 -->
        <div style="flex:0 1 50%">
          <dv-border-box-9 style="width: 100%;height: 600px;">
            <dv-flyline-chart :config="config4" style="width:100%;height:100%;" />
          </dv-border-box-9>
        </div>
        <!-- 右 -->
        <div style="flex:0 1 25%">
          <dv-border-box-1 style="width: 100%;height: 300px;">
            <dv-conical-column-chart :config="config6" style="width:350px;height:200px;margin: auto;" />
          </dv-border-box-1>
          <dv-border-box-1 style="width: 100%;height: 300px;">

            <dv-scroll-ranking-board :config="config7" style="width:350px;height:300px;margin: auto;" />
          </dv-border-box-1>
        </div>

      </div>
      <!-- 第三行 -->
      <div class="module-box">
        <div style="flex:0 1 50%">
          <dv-border-box-1 style="width: 100%;height: 200px;">
            <!-- 折线图 -->
            <dv-charts :option="option" />
          </dv-border-box-1>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-3 style="width: 100%;height: 200px;">
            <dv-active-ring-chart :config="config9" style="width:300px;height:300px;margin: auto;" />
          </dv-border-box-3>
        </div>

        <div style="flex:0 1 25%">
          <dv-border-box-1 style="width: 100%;height: 200px;">
            <dv-capsule-chart :config="config10" style="width:300px;height:200px;margin: auto;" />
          </dv-border-box-1>
        </div>

      </div>


    </dv-full-screen-container>
  </div>
</template>

<script setup>

const config10 = {
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    }
  ]
}
const config2 = {
  data: [
    { name: '杭州', value: 167 },
    { name: '宁波', value: 123 },
    { name: '温州', value: 98 },
    { name: '绍兴', value: 75 },
    { name: '湖州', value: 66 }
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '单位',
  showValue: true
}
const config3 = {
  data: [66]
}
const config4 = {
  centerPoint: [0.48, 0.35],
  points: [
    {
      position: [0.52, 0.235],
      text: '新乡'
    },
    {
      position: [0.43, 0.29],
      text: '焦作'
    },
    {
      position: [0.59, 0.35],
      text: '开封'
    },
    {
      position: [0.53, 0.47],
      text: '许昌'
    },
    {
      position: [0.45, 0.54],
      text: '平顶山'
    },
    {
      position: [0.36, 0.38],
      text: '洛阳'
    },
    {
      position: [0.62, 0.55],
      text: '周口'
    },
    {
      position: [0.56, 0.56],
      text: '漯河'
    },
    {
      position: [0.37, 0.66],
      text: '南阳'
    },
    {
      position: [0.55, 0.81],
      text: '信阳'
    },
    {
      position: [0.55, 0.67],
      text: '驻马店'
    },
    {
      position: [0.37, 0.29],
      text: '济源'
    },
    {
      position: [0.20, 0.36],
      text: '三门峡'
    },
    {
      position: [0.76, 0.41],
      text: '商丘'
    },
    {
      position: [0.59, 0.18],
      text: '鹤壁'
    },
    {
      position: [0.68, 0.17],
      text: '濮阳'
    },
    {
      position: [0.59, 0.10],
      text: '安阳'
    }
  ],
  bgImgUrl: '/img/flylineChart/map.jpg',
  centerPointImg: {
    url: '../../public/img/center.png'
  },
  pointsImg: {
    url: '../../public/img/point.png'
  }
}
const config6 = {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    '../../public/img/transport/img1.png',
    '../../public/img/transport/img2.png',
    '../../public/img/transport/img3.png',
    '../../public/img/transport/img4.png',
    '../../public/img/transport/img5.png',
    '../../public/img/transport/img6.png',
    '../../public/img/transport/img7.png',
  ]
}
const config7 = {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
}
const option = {
  title: {
    text: '剩余油量表',
    style: {
      fill: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      data: [{ name: 'itemA', value: 55 }],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
}
const config9 = {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    }
  ]
}
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100vh;

  background-color: rgb(5, 5, 5);

  .module-box {
    display: flex;
    justify-content: space-between;
    margin: 5px;
  }
}
</style>
